/**
 * This is hte mandatory CSS file to include on top of every CSS theme file 
**/

html {
  height: 100%;
  margin: 0;

  body {

    &.detailbody {
      padding-top: 90px; //margin-bottom: -90px;
      margin-left: 10px !important;
      padding-bottom: 20px;

      table.tabs {
        position: fixed;
        top: 58px;
        z-index: 50;
        margin-left: -10px;
        z-index: 50;
        tbody {
          tr {
            td {
              white-space: nowrap;
            }
          }
        }
      }
    }

    &.sql_edit {
      //padding-top: 35px;
      #flexbox_wrapper {
        height: 100%;
        margin-top: 25px;
      }

      table.tabs {
        top: 0;
      }
    }

    &.flexbox_body {
      height: 100%;
      margin: 0;
      .flexbox_wrapper {

        display: flex;
        height: 100%;
        margin: 0;

        .ui-resizable-helper {
          border: 2px dotted #00F;
        }

        #masking_overlay {
          position: fixed;
          top: 0;
          width: 100%;
          bottom: 0;
          z-index: 80;
          display: none;
        }
        &>.detail_container {
          height: 100%;
          width: 100%;
          margin: 0px;
          padding: 0px;
          text-align: left;
          float: left;
          flex: 1 1;
        }

        &>#browser_container {

          height: 100%;
          margin: 0px;
          padding: 0px;
          text-align: left;
          float: left;
          flex: 0 0 300px;

          &>.browser_container {
            height: 100%;
            margin: 0px;
            padding: 0px;
            text-align: left;
            float: left;
            width: 100%;
          }
          &.ui-resizable {
            width: 300px;
            flex: unset;
            border-right: 8px solid #cfd8dc;

            .ui-resizable-handle.ui-resizable-e {
              width: 8px;
              right: -8px;
              background: #84a0ad;
              top: 45%;
              height: 50px
            }
          }
        }
      }


      &.rtl {
        .flexbox_wrapper {

          &>.detail_container {
            float: right;
            flex-grow: 1;
          }

          &>#browser_container {

            float: right;
            flex: 0 0 300px;


            &.ui-resizable {
              flex: unset;
              border-right: 0 none;
              border-left: 8px solid #cfd8dc;

              .ui-resizable-handle.ui-resizable-w {
                width: 8px;
                left: -8px;
                background: #84a0ad;
                top: 45%;
                height: 50px
              }
            }
          }
        }
      }
    }


    /** Browser Tree using XLoadTree 2 **/
    &.browser {
      height: 100%;
      margin: 0px;
      padding: 0px;
      text-align: left;

      .refreshTree {
        float: right;
        text-align: right;
        padding: 0 3px;
      }

      .webfx-tree-row {
        white-space: nowrap
      }

      .webfx-tree-children {
        background-repeat: repeat-y;
        background-position-y: 1px !important;
        /* IE only */
      }

      .webfx-tree-row img {
        vertical-align: middle
      }

      .webfx-tree-item-label {
        margin-left: 0.5ex
      }

      .webfx-tree-icon {
        margin-left: 1px
      }

      .webfx-tree-hide-root {
        display: none
      }
    }


    img {
      border: none;
    }

    p.message {
      color: blue
    }

    p.comment {
      font-style: italic
    }

    .left {
      text-align: left
    }

    .pre {
      white-space: pre
    }

    .arg_icon {
      padding-right: 5pt;
      padding-left: 5pt;
    }

    .topbar {
      position: fixed;
      z-index: 100;
      width: 100%;
      top: 0;
      margin-left: -10px !important;
    }

    .trail {
      position: fixed;
      z-index: 100;
      width: 100%;
      top: 27px;
      margin-left: -10px !important;
    }





    /** auto-complete on insert **/
    #fkbg {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
    }

    #fklist {
      display: none;
      position: absolute;
      background: #fff;
      border: 1px solid #000;
      overflow: auto;
      z-index: 15;
    }

    #fklist table {
      border-collapse: collapse;
      border: 1px solid #aaa;
    }

    #fklist th {
      border: 1px solid #aaa
    }

    #fklist td,
    #fklist th {
      padding: 3px 10px;
      border-right: 1px solid #aaa;
      font-size: 12px;
    }

    #fklist td a {
      display: block;
      color: #000;
    }

    #fklist td a.fkval,
    p.errmsg {
      color: red;
    }

    .ac_values {
      width: 100%
    }

    /** bottom link back to top **/
    .bottom_link {
      position: fixed;
      bottom: 0;
      right: 0;
      margin: 0;
      padding: 4px;
      background: #eee;
      border-top: 1px dotted #999;
      border-left: 1px dotted #999;
      font-size: smaller;
    }
    /** FK browsing **/
    div#root {
      position: absolute;
    }

    div.fk {
      margin-left: 20px;
    }

    div#fkcontainer {
      margin: 0;
      position: relative;
      width: 100%;
      background: none;
      border: 0px;
    }

    div.fk_value {
      display: inline-block;
    }

    .highlight {
      background-color: #FFFF00;
    }
    /** Syntax highlighting **/
    .comment {
      color: #008080
    }

    .keyword {
      color: #FF8000
    }

    .literal {
      color: #808080
    }


    .select2-container {

      min-width: 250px;
    }


    form.sqlform {
      float: left;
      width: 100%;
    }

    .searchpath {
      padding: 5px;
      clear: both;
    }

    .CodeMirror {
      border: 1px solid #AAA;
      padding: 3px;
      font-size: 1.1em;
      line-height: 1.5em;
    }
  }
}



@media print {
  @page {
    size: 215.9mm 279.4mm;
    margin: 5mm 5mm 5mm 5mm;
    orphans: 100;
    widows: 0;
  }

  html,
  body {
    height: 100%;
    width: 100%;
  }

  #browser_container {
    display: none;
  }

  body {
    margin: 0; //zoom: 0.9;
    background: white;
    background-color: #ffffff;
    .flexbox_wrapper>.detail_container {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px;
      text-align: left;
      float: left;
      flex: 1 1;
      border: 4px red;
    }
    .topbar {
      display: none;
    }
    .trail {
      display: none;
    }
    h2 {
      display: none;
    }
  }
}